<div class="admin">
  <button
    nz-button
    nzType="primary"
    (click)="handleSync()"
    [nzLoading]="syncLoading"
  >
    {{ $t('_save') }}
  </button>
  <button
    nz-button
    style="margin: 0 15px 20px 15px;"
    (click)="handleReset()"
  >
    {{ $t('_resetInitData') }}
  </button>
  <button
    nz-button
    (click)="handleDownloadBackup()"
  >
    {{ $t('_backup') }}
  </button>

  <label id="file2">
    <button nz-button nz-tooltip [nzTooltipTitle]="$t('_importBackupTip')">
      {{ $t('_importBackup') }}
    </button>
    <input
      type="file"
      name="file2"
      (change)="handleUploadBackup($event)"
      accept=".json"
      class="file-upload"
    >
  </label>

  <nz-tabset *ngIf="isLogin" [nzSelectedIndex]="tabActive" (nzSelectedIndexChange)="onTabChange($event)">
    <nz-tab [nzTitle]="$t('_mgr1')">
      <button nz-button nzType="primary" (click)="toggleCreateModal()">{{ $t('_addTag') }}</button>
      <a
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(1)"
      >
        <button
          nz-button
          nzDanger
          class="ml10"
          [disabled]="setOfCheckedId.size <= 0"
        >
          {{ $t('_batchDel') }}
        </button>
      </a>
      
      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="websiteList"
        [nzShowPagination]="false"
        style="margin-top: 15px;"
      >
        <thead>
          <tr>
            <th [nzChecked]="checkedAll" (nzCheckedChange)="onAllChecked($event, 1)"></th>
            <th>{{ $t('_icon') }}</th>
            <th>{{ $t('_tagName') }}</th>
            <th>{{ $t('_onlyOwnVisible') }}</th>
            <th>{{ $t('_createAt') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropOne($event)">
          <tr *ngFor="let data of websiteList; let idx = index" cdkDrag>
            <td
              [nzChecked]="setOfCheckedId.has(data.title)"
              (nzCheckedChange)="onItemChecked(data.title, $event)"
            >
            </td>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.title"
              >
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">{{ $t('_edit') }}</a>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_delWarn')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelOne(idx)"
              >
                <a nz-button nzType="link" nzDanger>{{ $t('_del') }}</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgr2')">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 260px;"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateModal()"
        style="margin-left: 20px;"
      >
        {{ $t('_addTag') }}
      </button>
      <a
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(2)"
      >
        <button
          nz-button
          nzDanger
          class="ml10"
          [disabled]="setOfCheckedId.size <= 0"
        >
          {{ $t('_batchDel') }}
        </button>
      </a>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="twoTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px;"
      >
        <thead>
          <tr>
            <th [nzChecked]="checkedAll" (nzCheckedChange)="onAllChecked($event, 2)"></th>
            <th>{{ $t('_icon') }}</th>
            <th>{{ $t('_tagName') }}</th>
            <th>{{ $t('_onlyOwnVisible') }}</th>
            <th>{{ $t('_createAt') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropTwo($event)">
          <tr *ngFor="let data of twoTableData; let idx = index" cdkDrag>
            <td
              [nzChecked]="setOfCheckedId.has(data.title)"
              (nzCheckedChange)="onItemChecked(data.title, $event)"
            >
            </td>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.title"
              >
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">{{ $t('_edit') }}</a>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_delWarn')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelTwo(idx)"
              >
                <a nz-button nzType="link" nzDanger>{{ $t('_del') }}</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgr3')">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 200px;"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel2')"
        (ngModelChange)="hanldeTwoSelect($event)"
        style="width: 200px; margin-left: 15px;"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateModal()"
        style="margin-left: 20px;"
      >
        {{ $t('_addTag') }}
      </button>
      <a
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(3)"
      >
        <button
          nz-button
          nzDanger
          class="ml10"
          [disabled]="setOfCheckedId.size <= 0"
        >
          {{ $t('_batchDel') }}
        </button>
      </a>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="threeTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px;"
      >
        <thead>
          <tr>
            <th [nzChecked]="checkedAll" (nzCheckedChange)="onAllChecked($event, 3)"></th>
            <th>{{ $t('_icon') }}</th>
            <th>{{ $t('_tagName') }}</th>
            <th>{{ $t('_onlyOwnVisible') }}</th>
            <th>{{ $t('_createAt') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropThree($event)">
          <tr *ngFor="let data of threeTableData; let idx = index" cdkDrag>
            <td
              [nzChecked]="setOfCheckedId.has(data.title)"
              (nzCheckedChange)="onItemChecked(data.title, $event)"
            >
            </td>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.title"
              >
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">{{ $t('_edit') }}</a>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_delWarn')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelThree(idx)"
              >
                <a nz-button nzType="link" nzDanger>{{ $t('_del') }}</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgrWeb')">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 200px;"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel2')"
        (ngModelChange)="hanldeTwoSelect($event)"
        style="width: 200px; margin-left: 15px;"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="threeSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel3')"
        (ngModelChange)="hanldeThreeSelect($event)"
        style="width: 200px; margin-left: 15px;"
      >
        <nz-option
          *ngFor="let item of threeTableData"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateWebModal()"
        style="margin-left: 20px;"
      >
        {{ $t('_addWeb') }}
      </button>
      <a
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(4)"
      >
        <button
          nz-button
          nzDanger
          class="ml10"
          [disabled]="setOfCheckedId.size <= 0"
        >
          {{ $t('_batchDel') }}
        </button>
      </a>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="websiteTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px;"
      >
        <thead>
          <tr>
            <th [nzChecked]="checkedAll" (nzCheckedChange)="onAllChecked($event, 4)"></th>
            <th>{{ $t('_icon') }}</th>
            <th>{{ $t('_webName') }}</th>
            <th>{{ $t('_webTag') }}</th>
            <th>{{ $t('_onlyOwnVisible') }}</th>
            <th nzWidth="300px">{{ $t('_webDesc') }}</th>
            <th>{{ $t('_createAt') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody cdkDropList (cdkDropListDropped)="dropWebsite($event)">
          <tr *ngFor="let data of websiteTableData; let idx = index" cdkDrag>
            <td
              [nzChecked]="setOfCheckedId.has(data.name)"
              (nzCheckedChange)="onItemChecked(data.name, $event)"
            >
            </td>
            <td>
              <app-logo
                [src]="data.icon"
                [name]="data.name"
              >
              </app-logo>
            </td>
            <td>
              <a [href]="data.url" target="_blank">{{ data.name }}</a>
            </td>
            <td nzWidth="100px">
              <nz-tag *ngFor="let key of objectKeys(data.urls)" [nzColor]="tagMap[key].color || '#2db7f5'">
                <a [href]="data.urls[key]" target="_blank">{{ key }}</a>
              </nz-tag>
            </td>
            <td>
              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
            </td>
            <td>
              <pre class="desc">{{ data.desc }}</pre>
            </td>
            <td nzWidth="200px">{{ data.createdAt }}</td>
            <td nzWidth="100px">
              <a (click)="toggleCreateWebModal(); websiteDetail = data; editIdx = idx">{{ $t('_edit') }}</a>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_confirmDel')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelWebsite(idx)"
              >
                <a nz-button nzType="link" nzDanger>{{ $t('_del') }}</a>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>
  </nz-tabset>
</div>

<app-create-web
  [visible]="showCreateWebModal"
  (onCancel)="toggleCreateWebModal()"
  (onOk)="onOkCreateWeb($event)"
  [detail]="websiteDetail"
>
</app-create-web>

<nz-modal
  [(nzVisible)]="showCreateModal"
  [nzTitle]="isEdit ? $t('_edit') : $t('_add')"
  (nzOnCancel)="toggleCreateModal()"
  (nzOnOk)="handleOk()"
>
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>{{ $t('_tagName') }}</nz-form-label>
        <nz-form-control [nzSpan]="18" [nzErrorTip]="$t('_requiredName')">
          <input formControlName="title" nz-input [placeholder]="$t('_webTitle')" [maxlength]="50" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>{{ $t('_onlyOwnVisible') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-switch formControlName="ownVisible"></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ $t('_icon') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-input-group [nzPrefix]="prefixIcon">
            <input formControlName="icon" nz-input />
          </nz-input-group>

          <ng-template #prefixIcon>
            <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
